<template>
  <div class="AIAppManage page-base-box">
    <div class="head-box">
      <span class="flex-text">1</span>
    </div>
    <div class="content-box">
      <div class="search-box">
        <div class="search-list">
          <BaseTableSearch @search="getList" @reset="reset">
            <template #leftContent>
              <el-input
                v-model.trim="searchObj.typeName"
                maxlength="11"
                placeholder="请输入应用名称"
                @keyup.enter.native="getList"
                clearable
                class="search-item"
                @blur="getList"
                @clear="getList"
              ></el-input>

              <el-select
                class="search-item"
                placeholder="请选择应用类型"
                v-model="searchObj.alarmType"
                clearable
                @change="getList"
              >
                <el-option
                  v-for="(item, index) in searchOptions.alarmType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                class="search-item"
                placeholder="请选择关联算法"
                v-model="searchObj.businessName"
                multiple
                clearable
                @change="getList"
              >
                <el-option
                  v-for="(item, index) in searchOptions.businessName"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                class="search-item"
                placeholder="请选择算法来源"
                v-model="searchObj.source"
                multiple
                clearable
                @change="getList"
              >
                <el-option
                  v-for="(item, index) in searchOptions.aiSource"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                class="search-item"
                placeholder="请选择上架状态"
                v-model="searchObj.status"
                clearable
                @change="getList"
              >
                <el-option
                  v-for="(item, index) in searchOptions.status"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </BaseTableSearch>
        </div>
      </div>
      <TableEl
        :table-data="tableData"
        :column="column"
        ref="table"
        tooltip-effect="dark"
        v-loading="tableLoading"
        class="pdt16"
      >
        <!-- 应用说明插槽 -->
        <template v-slot:applicationDescription="{ row }">
          <!-- <div class="omit-box">{{ row.applicationDescription }}</div> -->
          <el-tooltip
            class="item"
            effect="dark"
            :content="row.applicationDescription"
            placement="top-start"
          >
            <div class="container">
              <div id="f-r-center j-b ">
                <p class="text" id="oneLine">
                  {{ row.applicationDescription }}
                </p>
                <p
                  v-if="row.applicationDescription"
                  class="algorithm"
                  style="disaply: inline-block"
                  @click="clickAlgorithm(row)"
                >
                  算法详情
                </p>
              </div>

              <!-- <p
                class="f-r-center j-b"
                v-show="
                  row.applicationDescription &&
                  row.applicationDescription.length > 12
                "
              >
                <span class="text" style="width: 70%" id="twoLine">{{
                  algorithmText(row.applicationDescription)[1]
                }}</span>
                <span
                  class="algorithm"
                  style="width: 30%; disaply: inline-block"
                  @click="clickAlgorithm(row)"
                  >算法详情</span
                >
              </p> -->
            </div>
          </el-tooltip>
        </template>
        <!-- 上架状态插槽 -->
        <template v-slot:status="{ row }">
          <span
            :class="{ circle: true, 'bg-color-67c23a': row.status == '1' }"
          ></span>
          <span>{{ row.status == "0" ? "未上架" : "已上架" }}</span>
        </template>
        <!-- 关联算法 -->
        <template v-slot:businessName="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            :content="row.businessName"
            placement="top-start"
          >
            <div>{{ row.businessName }}</div>
          </el-tooltip>
        </template>

        <!-- 按钮插槽 -->
        <template v-slot:btn="{ row }">
          <span class="opt-btn" @click="edit(row)"> 编辑 </span>
          <span class="opt-btn" @click="changeStatus(row)">{{
            row.status == "0" ? "上架" : "下架"
          }}</span>
        </template></TableEl
      >
      <div class="flexBtmBox">
        <span></span>
        <wl-pagination
          :total="total"
          :current-page.sync="pageForm.pageNum"
          :page-size.sync="pageForm.pageSize"
          @paginationChange="getList"
        ></wl-pagination>
      </div>
      <!--  -->
      <BaseDrawer
        @close="subFalse"
        title="编辑"
        :drawer="drawer"
        v-loading="drawerLoading"
      >
        <template #content>
          <FormEl
            v-loading="drawerLoading"
            v-if="drawer"
            ref="FormEl"
            :form-data="formData"
            :data-info="FormElData"
            :rules="rules"
          >
          </FormEl>
        </template>
        <template #footerRight>
          <el-button size="small" :disabled="drawerLoading" @click="subFalse"
            >取 消</el-button
          >
          <el-button
            size="small"
            :disabled="drawerLoading"
            type="primary"
            @click="subSure('FormEl')"
            >确 认</el-button
          >
        </template>
      </BaseDrawer>
    </div>
    <!-- 算法说明弹框 -->
    <el-dialog
      class="algorithm-dialog"
      title="算法说明详情"
      :visible.sync="dialogVisible"
      width="720"
      :before-close="handleClose"
    >
      <div>
        <div class="dialog-title">应用说明</div>
        <div class="dialog-content">
          {{
            algorithmData.applicationDescription
              ? algorithmData.applicationDescription
              : "内容完善中，敬请期待"
          }}
        </div>
        <div class="dialog-title">适用场景</div>
        <div>
          <div
            class="dialog-content"
            v-if="
              !isEmpty(algorithmData.applicableScenario) ||
              !isEmpty(algorithmData.applicableScenarioImages)
            "
          >
            {{ algorithmData.applicableScenario }}
          </div>
          <div class="dialog-content" v-else>
            {{ "内容完善中，敬请期待" }}
          </div>
        </div>
        <div class="dialog-img">
          <el-image
            class="img-box"
            v-for="(url, i) of algorithmData.applicableScenarioImages"
            :key="i"
            fit="contain"
            :src="configs.STATIC_URL + '/' + url"
            :preview-src-list="[configs.STATIC_URL + '/' + url]"
          ></el-image>
          <!-- :src="configs.STATIC_URL + '/' + url"
            :preview-src-list="[configs.STATIC_URL + '/' + url]" -->
          <!--  src="https://img0.baidu.com/it/u=4012750776,1433733738&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500" -->
        </div>
        <div class="dialog-title">不适用场景</div>
        <div>
          <!-- <div class="dialog-content">
            {{
              algorithmData.unsuitableScenario
                ? algorithmData.unsuitableScenario
                : "内容完善中，敬请期待"
            }}
          </div> -->
          <div
            class="dialog-content"
            v-if="
              !isEmpty(algorithmData.unsuitableScenario) ||
              !isEmpty(algorithmData.unsuitableScenarioImages)
            "
          >
            {{ algorithmData.unsuitableScenario }}
          </div>
          <div class="dialog-content" v-else>
            {{ "内容完善中，敬请期待" }}
          </div>
        </div>
        <div class="dialog-img">
          <el-image
            v-for="(url, i) of algorithmData.unsuitableScenarioImages"
            :key="i"
            class="img-box"
            :src="configs.STATIC_URL + '/' + url"
            fit="contain"
            :preview-src-list="[configs.STATIC_URL + '/' + url]"
          ></el-image>
          <!--  src="https://img1.baidu.com/it/u=3045548345,351215258&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1093" -->
          <!-- :src="configs.STATIC_URL + '/' + url"  -->
        </div>
        <div class="dialog-title">安装说明</div>
        <div class="dialog-content">
          {{
            algorithmData.installRequire
              ? algorithmData.installRequire
              : "内容完善中，敬请期待"
          }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableEl from "@/components/table/TableEl.vue";
import FormEl from "@/components/form/FormEl.vue";
import configs from "@/configs";
export default {
  components: {
    TableEl,
    FormEl,
  },
  name: "AIAppManage",
  data() {
    return {
      configs: configs,
      // 主表格列表
      column: [
        { label: "应用ID", prop: "typeId", tooltip: true ,width:100},
        { label: "应用名称", prop: "typeName", tooltip: true},
        { label: "应用类型", prop: "alarmType" },
        {
          label: "应用说明",
          prop: "applicationDescription",
          slotScope: true,
        },
      
        { label: "关联算法", prop: "businessName", slotScope: true },
        { label: "算法来源", prop: "aiSource" },
          { label: "上架状态", prop: "status", slotScope: true,width:100 },
        { label: "操作", prop: "btn", slotScope: true,width:120  },
      ],
      tableLoading: false, // 主表格loading

      // 主表格分页参数
      pageForm: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [], // 主表格数据

      drawer: false, // 抽屉显示与否
      drawerLoading: false, // 抽屉loading
      //  头部搜索字段组
      searchObj: {
        typeName: "",
        alarmType: "",
        businessName: [],
        source: [],
        status: "",
      },
      // 头部搜索下拉选项
      searchOptions: {
        alarmType: [],
        businessName: [],
        aiSource: [
          {
            label: "企信AI平台",
            value: 1,
          },
          {
            label: "魔镜平台",
            value: 2,
          },
        ],
        status: [
          {
            label: "未上架",
            value: 0,
          },
          {
            label: "已上架",
            value: 1,
          },
        ],
      },

      // 编辑表单
      // 表单渲染项
      formData: [
        {
          label: "应用名称",
          prop: "typeName",
          type: "input",
          width: "100%",
          require: true,
          placeholder: "请输入",
          maxlength: 20,
        },
        {
          label: "应用说明",
          prop: "applicationDescription",
          type: "textarea",
          width: "100%",
          require: false,
          placeholder: "请输入应用说明",
          maxlength: 500,
          rows: 8,
        },
        {
          label: "适用场景",
          prop: "applicableScenario",
          type: "textarea",
          width: "100%",
          require: false,
          placeholder: "请输入适用场景",
          maxlength: 500,
          rows: 8,
        },
        {
          type: "upload",
          prop: "applicableScenarioImages",
          showProp: "applicableScenarioImagesShow",
        },
        {
          label: "不适用场景",
          prop: "unsuitableScenario",
          type: "textarea",
          width: "100%",
          require: false,
          placeholder: "请输入不适用场景",
          maxlength: 500,
          rows: 8,
        },
        {
          type: "upload",
          prop: "unsuitableScenarioImages",
          showProp: "unsuitableScenarioImagesShow",
        },
        {
          label: "安装要求",
          prop: "installRequire",
          type: "textarea",
          width: "100%",
          require: false,
          placeholder: "请输入安装要求",
          maxlength: 500,
          rows: 8,
        },
      ],
      FormElData: {
        applicableScenarioImages: [],
        unsuitableScenarioImages: [],
      }, //表单数据
      rules: {
        typeName: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 算法说明弹框
      dialogVisible: false,
      algorithmData: {},
    };
  },
  computed: {
    algorithmText() {
      return function (row) {
        // // 第一行显示的内容根据宽度去计算能够容纳的长度然后截取内容显示
        // // 第二行显示剩余的内容
        let oneLine = document.getElementById("oneLine");
        if (oneLine) {
          console.log("oneLine", oneLine.style);
          // oneLine.className = "getTextWidth";
          // span.innerText = str;
          // document.querySelector("body").appendChild(span);
          // width = document.querySelector(".getTextWidth").offsetWidth;
          // document.querySelector(".getTextWidth").remove();
        }
        row = row ? row : "";
        var twoLine = "";
        if (row.length > 13) {
          twoLine = row.slice(13, -1);
        }
        return row ? [row.slice(0, 13), twoLine] : ["", ""];
      };
    },
  },
  created() {
   // this.getList();
   // this.aiSelect();
  },
  methods: {
    // 校验数据是否为空值
    isEmpty: (val) => {
      if (typeof val == "undefined" || val == null || val == "") {
        return true;
      } else {
        return false;
      }
    },
    handleClose(done) {
      done();
    },
    // AI应用下拉
    async aiSelect() {
      let res = await this.$post(
        "/operation/project/getAiManagementDropDown",
        {}
      );

      if (res.code == 200 && res.data) {
        console.log("AI应用下拉", res.data);
        this.splitAndPushOptions(
          res.data.alarmType,
          this.searchOptions.alarmType
        );
        this.splitAndPushOptions(
          res.data.businessName,
          this.searchOptions.businessName
        );
      }
    },
    // 字符串转指定数组
    splitAndPushOptions(str, optionsArray) {
      str.split("，").forEach((v) => {
        optionsArray.push({
          label: v,
          value: v,
        });
      });
    },

    // 获取数据列表
    async getList() {
      this.tableLoading = true;

      let res = await this.$post("/operation/project/getAll", {
        ...this.searchObj,
        ...this.pageForm,
      });
      this.tableLoading = false;
      console.log("获取数据列表", res);
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
    },
    // 算法说明
    clickAlgorithm(row) {
      console.log("算法说明", row);
      this.algorithmData = row;
      this.dialogVisible = true;
    },
    // 编辑按钮
    edit(row) {
      console.log("编辑按钮", row);
      this.FormElData = row;
      this.drawer = true;
    },

    // 重置按钮
    reset() {
      this.searchObj = {
        typeName: "",
        alarmType: "",
        businessName: [],
        source: [],
        status: "",
      };
      this.pageForm = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
    //抽屉点取消或者X
    subFalse() {
      this.drawer = false;
    },
    //抽屉点确定
    subSure(ref) {
      this.drawerLoading = true;

      this.$refs[ref].$submitForm((valid, data) => {
        let {
          typeName,
          applicationDescription,
          applicableScenario,
          applicableScenarioImages,
          unsuitableScenario,
          unsuitableScenarioImages,
          typeId,
          installRequire,
        } = data;

        if (valid) {
          this.editApi(
            {
              typeName,
              applicationDescription,
              applicableScenario,
              applicableScenarioImages,
              unsuitableScenario,
              unsuitableScenarioImages,
              installRequire,
              typeId,
            },
            () => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.drawer = false;
              this.drawerLoading = false;
              this.getList();
            }
          );
        }
      });
    },
    // 编辑接口
    async editApi(data, cb) {
      console.log("编辑接口参数", data);
      let res = await this.$post("/operation/project/updateAiManagement", {
        ...data,
      });
      if (res.code == 200) {
        cb && cb();
      }
    },
    //切换状态上架下架状态
    changeStatus(row) {
      if (row == undefined) {
        return false;
      }

      const h = this.$createElement;
      this.$confirm("提示", {
        title: `AI应用${row.status == "1" ? "下架" : "上架"}后项目将${
          row.status == "1" ? "不" : ""
        }可应用该应用`,
        message: h("div", { style: "margin-y:26px" }, [
          h(
            "span",
            { style: "margin-bottom:10px;color:#F56C6C" },
            `${
              row.status == "1"
                ? "AI应用下架后项目将不可见并不可应用该应用"
                : "AI应用上架后项目将可见并可应用该应用"
            }`
          ),
          h("span", "，你还要继续吗？"),
        ]),
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.tableLoading = true;
        this.editApi(
          {
            typeId: row.typeId,
            status: row.status == "0" ? "1" : "0",
            typeName: row.typeName,
          },
          () => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.tableLoading = false;
            this.getList();
          }
        );
      });
    },
  },
};
</script>

<style scoped lang="scss">
.omit-box {
  min-width: 136px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 状态圆圈颜色
.circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  background-color: #cccccc;
}
.bg-color-67c23a {
  background-color: #67c23a;
}
// .bg-color-gray {
//   background-color: gray;
// }
.f-c-them {
  color: #0170fe;
}
.el-form-item__label {
  font-weight: bolder;
  color: #303133;
}
// ::v-deep .applicableScenario > .el-form-item__label::after,
// ::v-deep .unsuitableScenario > .el-form-item__label::after {
//   content: "支持上传jpg、png格式图片，单张图片大小不超过2M";
//   color: #909399;
//   font-size: 12px;
//   margin-left: 8px;
//   font-weight: 100;
// }

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.algorithm {
  white-space: nowrap;
  text-align: left;
  padding-right: 4px;
  color: #0170fe;
  // padding-right: 6px;
  display: inline-block;
  border-bottom: 1px solid transparent;
  border-bottom: 1px solid #0170fe;
}
.algorithm:hover {
  cursor: pointer;
  color: #4c9afe;

  // text-decoration: underline;
}
::v-deep {
  .algorithm-dialog {
    // // width: 400px; /* 设置弹窗的宽度 */

    .el-dialog__title {
      font-weight: bolder;
    }
    .el-dialog {
      padding-left: 24px;

      height: 600px; /* 设置弹窗的高度 */

      // background: #67c23a !important;

      // /* 允许垂直滚动 */
      // overflow-y: auto;
    }
    .el-dialog__body {
      padding: 0 !important;
      padding-right: 24px !important;
      overflow: scroll; /* 隐藏内容溢出部分 */
      height: 540px; /* 设置弹窗的高度 */
    }
    .el-dialog__header {
      padding: 0 !important;
      padding-top: 20px !important;
      padding-bottom: 12px !important;
    }
    .dialog-title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
      margin-bottom: 12px;
      margin-top: 24px;
    }
    .dialog-content {
      font-size: 14px;
      color: #606266;
      margin-bottom: 12px;
      margin-top: 12px;
    }
    .dialog-img {
      // margin-bottom: 12px;
      // margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      .img-box {
        // margin-top: 12px;
        height: 100px;
        width: calc(25% - 8px);
        margin-right: 8px;
        background: #545b6f;
        border-radius: 4px;
      }
      .img-box:nth-child(5),
      .img-box:nth-child(6) {
        margin-top: 12px;
        height: 100px;
        width: calc(25% - 8px);
        margin-right: 8px;
      }
    }
  }
}

.AIAppManage {
  width: 100%;
  height: 100%;
  //   padding: 20px;
  background-color: #fff;
}

.head-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 49px;
  background: #eef9ff;
  padding: 0 16px;

  .flex-text {
    font-size: 18px;
    font-weight: 500;
  }

  .add-head-btn {
    padding: 0 16px;
    height: 34px;
    line-height: 34px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 0px rgba(1, 112, 254, 0.2);
    font-size: 14px;
    color: #0170fe;
    cursor: pointer;
  }
}

.flexBtmBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.btmClass {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 8px 24px;
}

.content-box {
  padding: 24px 24px 16px;
  width: 100%;
  height: calc(100% - 49px);
  overflow-y: auto;

  .search-box {
    background: #fafbfc;
    border: 1px solid #edf0f5;

    .search-list {
      padding: 16px;
    }

    .search-item {
      width: 200px;
      margin: 0 10px 10px 0;
      &.width-auto {
        width: auto;
      }
    }

    .search-btn {
      margin: 0 8px 0px 0;
      vertical-align: top;
    }
  }

  .content-table {
    padding-top: 16px;
  }
}

.frcc {
  margin-bottom: 16px;
}

.add_btn {
  background: #ffffff;
  border-radius: 1px 1px 1px 1px;
  opacity: 1;
  border: 1px solid rgba(1, 112, 254, 0.4);
  font-weight: 400;
  color: #0170fe;
}

.projBox {
  position: relative;

  .delIcon {
    position: absolute;
    right: 7px;
    top: -30px;
    z-index: 999;
    font-size: 20px;
    cursor: pointer;
  }
}

.detailsTitle {
  font-size: 14px;
  font-weight: 400;
  color: #606266;
  margin-bottom: 8px;
}

.tableCss {
  // border: none;
  border-collapse: collapse;
  width: 100%;

  td {
    border-top: 1px solid #f4f6fa;
    border-bottom: 1px solid #f4f6fa;
    border-right: 1px solid #f4f6fa;
    padding: 16px 24px;
    text-align: center;
  }

  tr > td:nth-child(odd) {
    // width: 30%;
    background: #f7f8fb;
    border-right: 1px solid #f4f6fa;
  }
}

::v-deep {
  .el-form-item__label {
    padding: 0;
  }

  .el-drawer__body {
    padding: 0 20px 60px;
    overflow-y: auto;
  }
}
</style>